<template>
	<view>
		<!-- 流星背景 -->
		<stars v-if="!showLoading"></stars>
		
		<!-- 取消原生导航，用空导航占位 -->
		<u-navbar :is-back="false" :title="' '" background="transparent" :border-bottom="false"></u-navbar>
		
		
		<!-- loading -->
		<loading :sign="showLoading"></loading>
		
		<!-- 登录 -->
		<login v-if="showLogin"></login>
		<!-- 首页 -->
		<view :class="['animationBox', current == 0 ? 'fadeIn': 'fadeOut']">
			<index v-if="current == 0"></index>
		</view>
		<!-- 导出 -->
		<view :class="['animationBox', current == 1 ? 'fadeIn': 'fadeOut']">
			<exp v-if="current == 1"></exp>
		</view>
		<!-- 添加记录 -->
		<view :class="['animationBox', current == 2 ? 'fadeIn': 'fadeOut']">
			<add v-if="current == 2"></add>
		</view>
		<!-- 查看 -->
		<view :class="['animationBox', current == 3 ? 'fadeIn': 'fadeOut']">
			<watch v-if="current == 3"></watch>
		</view>
		<!-- 个人中心 -->
		<view :class="['animationBox', current == 4 ? 'fadeIn': 'fadeOut']">
			<user v-if="current == 4" :list="userExpData"></user>
		</view>
		

		
		
		<u-tabbar v-model="current" :list="tabbar" @change="tabBarChange" bg-color="#fff" active-color="#FA3534" :mid-button="true"></u-tabbar>
	</view>
</template>

<script>
	import tabbar from '../../utils/tabbar.js' // 导入tabbar配置
	// 模拟单页应用
	import index from '@/components/view/index.vue' // 导入首页
	import add from '@/components/view/add.vue' // 导入添加页
	import user from '@/components/view/user.vue' // 导入用户页
	import exp from '@/components/view/exp.vue' // 导入用户页
	import watch from '@/components/view/watch.vue' // 导入查看页
	import login from '@/components/view/login.vue' // 导入登录页
	import loading from '@/components/view/loading.vue' // 导入loading
	var _mine
	export default {
		components:{ index, add, user, watch, login, exp, loading },
		data() {
			return {
				// 选中了哪个tabbar, null 为未登录
				current: null,
				// tabbar配置
				tabbar,
				// 是否显示loading
				showLoading: true,
				// 是否显示登录页
				showLogin: true,
			}
		},
		onLoad() {
			_mine = this
			/*
			 * api1: 进入小程序主页就uni.login获取code传给后台，后台会传回来openid 
			 * api2: 发送携带token的请求去后台验证token是否过期
			 * api3: 点击微信登录，传openId给去后台获取token
			*/ 
		   
		  
			uni.login({
				async success(e) {
					const { code } = e
					
					// 传给后台code用来获取openid，如果token过期，需要用openid 去后台取token
					await _mine.$post.code({ code }).then(res => {
						const { openid } = res.data
						// 存起openid
						uni.setStorageSync('openid', openid)
					})
					
					// 验证当前token是否过期，过期就显示登录，不过期就直接进入首页
					await _mine.$get.ccc().then(res => {
						const { data } = res
						if (data.status == 200) {
							// status == 200 说明token没过期
							_mine.current = 0
							_mine.showLogin = false
						}
					}).catch()
					
					// 关闭loading
					_mine.showLoading = false
				}
			})
			
			
			
			// 设置全局事件，监听登录成功后更改的current
			uni.$on('changeCurrent', (data) => {
				this.current = data.current
			})
			// 设置全局事件，监听登录成功后更改的showLogin
			uni.$on('changeShowLogin', (data) => {
				this.showLogin = false
			})
		},
		methods: {
			// tab栏切换事件
			tabBarChange: function (e) {
				console.log(e);
			}
		}
	}
</script>

<style scoped>
	.animationBox{
		transition: all .6s ease;
	}
	.fadeIn{
		opacity: 1;
	}
	.fadeOut{
		opacity: 0;
	}
	
	
</style>
